<template>
  <div class="container">
    <el-card style="margin: 10px">
      <!-- 头部区域 -->
      <el-form label-width="80" :inline="true" class="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关键字" size="small">
              <el-input placeholder="根据编号搜索" v-model="page.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 警告框 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        show-icon
        :closable="false"
        type="info"
      >
      </el-alert>
      <!-- tabel表格 -->
      <el-table
        style="margin-top: 15px"
        :header-cell-style="headerClass"
        :data="list"
        v-loading="loading"
      >
        <el-table-column label="编号" prop="id" width="220"> </el-table-column>
        <el-table-column label="题型" width="80">
          <template v-slot="{ row }">
            <p v-if="row.questionType === '1'">单选</p>
            <p v-else-if="row.questionType === '2'">多选</p>
            <p v-else>简答</p>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" prop="questionType" width="220">
          <template v-slot="{ row }">
                <a v-for="(item, index) in row.questionIDs" :key="index" @click="preview(item)" class="topic-style">{{ item.number }}</a>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addTime"> </el-table-column>
        <el-table-column label="答题时间(s)" prop="totalSeconds">
        </el-table-column>
        <el-table-column label="正确率(%)" prop="accuracyRate">
        </el-table-column>
        <el-table-column label="录入人" prop="userName"> </el-table-column>
        <el-table-column label="操作" width="80">
          <template v-slot="{row}">
            <el-button type="danger" icon="el-icon-delete" circle plain @click="removeRandoms(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" style="margin-top: 20px" justify="end">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
          @current-change="changePage"
          @size-change="changeSize"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 预览组件 -->
    <QuestionsPreview :dialogVisible="dialogVisible" :onlist="onlist" @close="dialogVisible=$event" ref="Preview"></QuestionsPreview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      total: 0, // 总条数
      page: { // 获取组题列表,请求数据
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      list: [], // 存储列表数据
      loading: false, // 加载数据时的状态
      dialogVisible: false, // 控制预览组件的显示隐藏
      onlist: {} // 传递给子组件的数据
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    headerClass () { // 表格标题背景颜色
      return 'background:#fafafa'
    },
    async randoms () { // 获取组题列表数据
      try {
        this.loading = true
        const { data } = await randoms(this.page)
        this.total = data.counts
        this.list = data.items
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    changePage (newPage) { // 改变页码触发
      this.page.page = newPage
      this.randoms()
    },
    changeSize (newSize) { // 改变条目触发
      this.page.pagesize = newSize
      this.randoms()
    },
    async removeRandoms (row) { // 点击删除
      try {
        await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await removeRandoms(row) // 调用删除接口
        if (this.list.length === 1) { // 判断删除的是不是最后一条数据,如果是让页码值减一
          this.page.page = this.page.page > 1 ? this.page.page - 1 : 1
        }
        this.randoms() // 重新获取数据
        this.$message.success('删除成功') // 成功提示
      } catch (error) {
        console.log(error)
      }
    },
    search () { // 点击搜索
      this.randoms() // 重新获取数据
    },
    clear () { // 点击清除
      this.page.keyword = ''
      this.randoms() // 重新获取数据
    },
    async preview (item) { // 题目预览
      try {
        const { data } = await detail(item)
        this.onlist = data
        this.$refs.Preview.findRadio() // 调用子组件中的方法
        this.dialogVisible = true // 打开弹层
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .form {
    padding-left: 20px;
  }
  .topic-style{
    display: block;
    color: #00a7ff;
  }
}
</style>
